<template>
  <div class="page-card handle-event">
    <h-query
      :showKey="['startTime,endTime']"
      :query="query"
      :defaultValueDate="defaultValueDate"
      format="YYYY-MM-DD"
      :showTime="false"
      @search="search">
      <!-- <h-tooltip slot="btn" title="1. 筛选条件缺失 2. 删除无效" /> -->
      <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0" @click.stop="add">添加模板</a-button>
    </h-query>
    <a-row :gutter="[20,20]">
      <a-col :span="8" v-for="(item, i) in list" :key="i">
        <div class="handle-event--card">
          <h1>{{ item.mainTitle | htmlFilter }}</h1>
          <p class="tags"><span>创建时间：{{ item.createTime }}</span></p>
          <p class="handle-event--content ellipsis-2">{{ item.orderName }}</p>
          <div class="handle-event--tip" :style="{backgroundImage: `url(${require('@/assets/Image/icon/rect-bg.png')})`}">
            创建人: {{ item.createBy }}
          </div>
          <div class="handle-event--btn">
            <a-button type="primary" class="a-button-border" @click="edit(item)">编 辑</a-button>
            <a-button type="primary" style="margin-left: 12px" @click="remove(item)">删 除</a-button>
          </div>
        </div>
      </a-col>
    </a-row>
    <div class="hlist-pagination" style="">
      <a-pagination v-model="current" v-bind="paginationConfig" @change="refresh" />
    </div>

    <createIns ref="createIns" v-model="show" @submit="submit" />
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon';
import createIns from './action/createIns';
import { getOrderTemplatePageList, deleteOrderTemplate } from '@/api/serve';
import { replaceHTML } from '@/api/common';

export default {
  components: {
    SvgIcon,
    createIns
  },
  data() {
    return {
      query: [
        {
          key: 'mainTitle',
          type: 'input',
          label: '模板名称'
        }
        // {
        //   key: 'createTime',
        //   type: 'date',
        //   label: '时间'
        // }
      ],
      defaultValueDate: {
        value: null
      },
      show: false,
      current: 1,
      paginationConfig: {
        pageSize: 6,
        total: 100
      },
      list: [

      ],
      queryParams: {
        pageNo: 1,
        pageSize: 6
      },
      form: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    search(params) {
      this.queryParams = { ...this.queryParams, ...params };
      this.current = params.pageNo;
      this.getList();
    },
    add() {
      this.show = true;
      this.$refs.createIns.add();
    },
    edit(record) {
      this.show = true;
      this.$refs.createIns.edit(record);
    },
    remove({ id }) {
      const that = this;
      this.$confirm({
        title: '温馨提示',
        content: '确认要删除吗？',
        onOk() {
          deleteOrderTemplate({ id, isDelete: -1 }).then(res => {
            that.$message.success(res.msg);
            that.getList();
          });
        }
      });
    },
    submit() {
      this.show = false;

      this.current = 1;
      this.queryParams = {
        pageNo: 1,
        pageSize: 6
      };
      this.getList();
    },
    getList() {
      getOrderTemplatePageList(this.queryParams).then(res => {
        this.list = res.data.records.map(e => {
          return {
            ...e,
            content: (typeof e.content == 'string') ? replaceHTML(e.content) : ''
          };
        });
        this.paginationConfig.total = res.data.total;
      });
    },
    getListAll() {

    },
    refresh(page) {
      this.queryParams.pageNo = page;
      this.getList();
    }
  }
};
</script>

<style scoped lang="less">
  h1,p {
    margin: 0;
  }
  .handle-event {
    .a-button-blue {
      position: absolute;
      right: 0;
      top: 0;
    }
    .handle-event--card {
      background: #FFFFFF;
      box-shadow: 0px 0px 20px 0px rgba(20,15,41,0.1000);
      padding: 20px 20px;
      position: relative;
      border-radius: 10px;
      // padding-bottom: 93px;
      h1 {
        font-size: 20px;
        font-weight: 500;
        color: #333333;
      }
      >p.tags {
        margin-top: 8px;
        color: #999;
        border-bottom: 1px solid #ddd;
        padding-bottom: 12px;
        >span:first-child {
          font-size: 13px;
          font-weight: 400;
          color: #999;
          margin-right: 12px;
        }
      }
      >p {
        font-size: 15px;
        font-weight: 400;
        color: #999999;
        line-height: 1.5;
        margin-top: 8px;
      }
      .handle-event--footer {
        margin-top: 20px;
        p {
          font-size: 14px;
          font-weight: 400;
          color: #999;
        }
      }
      .handle-event--tip {
        position: absolute;
        right: 0;
        top: 0;
        width: 110px;
        height: 36px;
        color: #fff;
        text-align: center;
        text-indent: 4px;
        line-height: 36px;
        font-size: 12px;
      }
    }
    .handle-event--content {
      min-height: 60px;
    }
    .handle-event--btn {
      margin-top: 16px;
      text-align: right;
    }

    .hlist-pagination {
      margin: 20px 0;
      text-align: center;
      margin-top: 80px;
    }
  }
</style>
